<section class="hbox stretch">
    <section>
        <section class="vbox">
            <section class="scrollable padder-lg w-f-md" id="bjax-target">
                <a href="#" class="pull-right text-muted m-t-lg" data-toggle="class:fa-spin" ><i class="icon-refresh i-lg  inline" id="refresh"></i></a>
                <h2 class="font-thin m-b">发现 <span class="musicbar animate inline m-l-sm" style="width:20px;height:20px">
                    <span class="bar1 a1 bg-primary lter"></span>
                    <span class="bar2 a2 bg-info lt"></span>
                    <span class="bar3 a3 bg-success"></span>
                    <span class="bar4 a4 bg-warning dk"></span>
                    <span class="bar5 a5 bg-danger dker"></span>
                  </span></h2>
                <div class="row row-sm">
                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" ng-repeat="discover in discoverList">
                        <div class="item">
                            <div class="pos-rlt">
                                <div class="top">
                                    <span class="pull-right m-t-sm m-r-sm badge bg-info">{{discover.hot}}</span>
                                </div>
                                <div class="item-overlay opacity r r-2x bg-black">
                                    <div class="text-info padder m-t-sm text-sm">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-o text-muted"></i>
                                    </div>
                                    <div class="center text-center m-t-n">
                                        <a href="" ng-click="playCurrentSong(discover)"><i class="icon-control-play i-2x"></i></a>
                                    </div>
                                    <div class="bottom padder m-b-sm">
                                        <a href="" class="pull-right">
                                            <i class="fa fa-heart-o"></i>
                                        </a>
                                        <a href="" ng-click="addSong(discover)">
                                            <i class="fa fa-plus-circle"></i>
                                        </a>
                                    </div>
                                </div>
                                <a href=""><img src="{{discover.pic_big}}" alt="" class="r r-2x img-full"></a>
                            </div>
                            <div class="padder-v">
                                <a href="" class="text-ellipsis">{{discover.title}}</a>
                                <a href="" class="text-ellipsis text-xs text-muted">{{discover.author}}</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-7">
                        <h3 class="font-thin">新歌</h3>
                        <div class="row row-sm">
                            <div class="col-xs-6 col-sm-3" ng-repeat="new in newList">
                                <div class="item">
                                    <div class="pos-rlt">
                                        <div class="item-overlay opacity r r-2x bg-black">
                                            <div class="center text-center m-t-n">
                                                <a href="" ng-click="playCurrentSong(new)"><i class="fa fa-play-circle i-2x"></i></a>
                                            </div>
                                        </div>
                                        <a href=""><img src="{{new.pic_big}}" alt="" class="r r-2x img-full"></a>
                                    </div>
                                    <div class="padder-v">
                                        <a href="" class="text-ellipsis">{{new.title}}</a>
                                        <a href="" class="text-ellipsis text-xs text-muted">{{new.author}}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <h3 class="font-thin">热门歌曲</h3>
                        <div class="list-group bg-white list-group-lg no-bg auto">
                            <a href="" ng-repeat="top in topList" ng-click="playCurrentSong(top)" class="list-group-item clearfix">
                                <span class="pull-right h2 text-muted m-l">{{$index + 1}}</span>
                                <span class="pull-left thumb-sm avatar m-r">
                                    <img src="{{top.pic_big}}" alt="...">
                                </span>
                                <span class="clear">
                                    <span>{{top.title}}</span>
                                    <small class="text-muted clear text-ellipsis">{{top.author}}</small>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="row m-t-lg m-b-lg">
                    <div class="col-sm-6">
                        <div class="bg-primary wrapper-md r">
                            <a href="" ui-sref="user_login">
                                <span class="h4 m-b-xs block"><i class=" icon-user-follow i-lg m-r"></i>登陆或创建您的账号</span>
                                <span class="text-muted">保存并与你的朋友分享你的播放列表,当你登录或创建一个帐户。</span>
                            </a>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="bg-black wrapper-md r">
                            <a href="">
                                <span class="h4 m-b-xs block"><i class="icon-cloud-download i-lg m-r"></i>下载应用APP</span>
                                <span class="text-muted">让桌面和移动应用程序的任何地方、任何时间开始听音乐。</span>
                            </a>
                        </div>
                    </div>
                </div>
            </section>
        </section>
    </section>
    <!-- side content -->
    <aside class="aside-md bg-light dk" id="sidebar">
        <section class="vbox animated fadeInRight">
            <section class="w-f-md scrollable hover">
                <h4 class="font-thin m-l-md m-t">连接</h4>
                <ul class="list-group no-bg no-borders auto m-t-n-xxs">
                    <li class="list-group-item" ng-repeat="connected in connectedList" ng-click="playCurrentSong(connected)">
                        <span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
                            <img src="{{connected.pic_big}}" alt="..." class="img-circle">
                            <i class="on b-light right sm"></i>
                        </span>
                        <div class="clear">
                            <div><a href="">{{connected.title}}</a></div>
                            <small class="text-muted">{{connected.author}}</small>
                        </div>
                    </li>
                </ul>
            </section>
        </section>
    </aside>
    <!-- / side content -->
</section>
<a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>